WordPress é Arrastar e Soltar, MAS... Veja Por Que Eu Ainda Mexo com HTML

Já se perguntou como os sites realmente funcionam?

Pode parecer mágica, mas existe uma linguagem por trás de cada página da web que você vê. Essa linguagem é chamada de HTML.

Pense no HTML como os blocos de construção básicos da internet.

Mesmo um pouco de conhecimento de HTML pode realmente aprimorar seu jogo no WordPress. Eu vi em primeira mão como isso ajuda as pessoas a tornarem seus sites WordPress ainda melhores.

Neste post, explicarei o que é HTML, por que ele é importante e como você pode adicionar código HTML personalizado ao seu site WordPress.

Você pode se surpreender com a facilidade e utilidade que isso pode ser para um design web eficaz!

Sumário

O que é HTML?

HTML significa HyperText Markup Language. Basicamente, HTML é a linguagem que estrutura o conteúdo da web. Pense nisso como o esqueleto de uma página da web.

HTML usa algo chamado “tags”. As tags dizem ao navegador da web o que cada parte do seu conteúdo é.

Por exemplo, as tags podem dizer ao navegador que algo é um título, um parágrafo ou uma imagem. Os navegadores leem essas tags para exibir as páginas da web da maneira que deveriam parecer.

HTML não é uma linguagem de programação. É mais como uma forma de organizar informações para que os navegadores possam entendê-la.

Por que você deveria se importar com HTML no WordPress?

O WordPress é super fácil de usar. Você pode construir um site inteiro sem saber nenhum código. Então, por que se preocupar com HTML?

Bem, o HTML lhe dá mais controle sobre seu conteúdo. Às vezes, o editor normal do WordPress simplesmente não é suficiente.

Diga que você quer adicionar um atributo específico a uma imagem. Ou talvez você queira criar um estilo de lista realmente único. O HTML permite que você faça coisas assim.

HTML também é uma salvação para solução de problemas.

Já teve um problema de formatação estranho no WordPress? Olhar o HTML pode ajudá-lo a encontrar e corrigir o problema rapidamente. É muito mais rápido do que adivinhar com o editor visual.

Além disso, o HTML lhe dá flexibilidade. Quer adicionar algumas personalizações avançadas? Como classes personalizadas para estilização ou layouts mais complexos? O HTML desbloqueia essas possibilidades.

E aqui está um ponto importante: preparação para o futuro.

O WordPress está sempre mudando. Mas o HTML? É uma habilidade fundamental da web que sempre será útil.

Eu já vi isso acontecer várias vezes – entender HTML te torna muito mais adaptável no mundo da web.

HTML 101: O Básico

Vamos falar sobre os blocos de construção do HTML. Eles são chamados de tags.

Tags são instruções que dizem ao navegador o que fazer com seu conteúdo. A maioria das tags vem em pares: uma tag de abertura e uma tag de fechamento.

Por exemplo, se você quiser criar um parágrafo, você usa a tag <p> para iniciá-lo e </p> para finalizá-lo.

Viu a barra na tag de fechamento? É assim que você sabe que é o fim.

Vamos ver algumas tags HTML comuns que você usará bastante:

Títulos são para títulos e subtítulos. Você tem <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.

<h1> é o título mais importante (geralmente o título principal), e <h6> é o menos importante.

Links são o que fazem a web, bem, uma web! A tag <a> cria links. <a> significa "anchor" (âncora).

Quer mostrar imagens? A tag <img> é sua amiga. <img> é abreviação de "image" (imagem).

Precisa fazer uma lista de coisas? O HTML te cobre. Existem dois tipos principais:

• <ul> para listas não ordenadas (marcadores). "ul" significa "unordered list" (lista não ordenada).
• <ol> para listas ordenadas (listas numeradas). "ol" significa "ordered list" (lista ordenada).

E dentro de <ul> e <ol>, você usa tags <li> para cada item da lista. "li" significa "list item" (item da lista).

Tags também podem ter atributos. Atributos fornecem informações extras sobre uma tag.

Por exemplo, a tag <a> precisa de um atributo href para dizer para onde linkar. Assim: <a href="https://example.com">Texto do link</a>. O atributo href contém o endereço do site.

E a tag <img> precisa de um atributo src para dizer onde encontrar o arquivo de imagem. Ela também deve ter um atributo alt para "texto alternativo", que é importante se a imagem não puder carregar ou para acessibilidade.

Assim: <img src="imagem.jpg" alt="Texto descritivo">.

Aqui está um exemplo super simples de HTML em ação:

<h1>Welcome to My Blog</h1>

<p>This is my first paragraph of content. It's going to be awesome!</p>

<a href="https://duplicator.com">Check out Duplicator!</a>

Esse código criaria um título principal, um parágrafo e um link em uma página da web.

Quando comecei a aprender HTML, essas tags básicas foram meu ponto de partida. E, honestamente? Elas ainda são a base de quase tudo que faço online. Essas tags simples são poderosas!

Colocando o HTML em Prática: Exemplos Práticos

Então, como você pode realmente usar HTML no WordPress? Vamos ver alguns exemplos.

Quer deixar algum texto em negrito ou itálico? O HTML pode fazer isso.

Use as tags <strong> e </strong> para deixar o texto em negrito. Ou use as tags <b> e </b>, elas também deixam o texto em negrito.

Assim: <strong>Este texto está em negrito</strong>.

Para itálico, use <em> ou <i>. Assim: <em>Este texto está em itálico</em>.

Essas tags ajudam você a enfatizar palavras e frases em seu conteúdo.

Falamos sobre a tag <a>. Você pode usá-la para vincular a outras páginas do seu site ou a outros sites.

Você pode vincular texto, imagens ou até botões. Tudo se resume a usar essa tag <a> com o atributo href correto.

Quer adicionar um vídeo do YouTube ou Vimeo ao seu site WordPress? A maioria das plataformas de vídeo fornece códigos de incorporação. Esses códigos geralmente são HTML, muitas vezes usando tags <iframe>.

Basta copiar o código de incorporação do YouTube (ou de onde seu vídeo estiver hospedado) e colá-lo no WordPress. O WordPress saberá o que fazer com ele.

Precisa de uma lista com marcadores? Use tags <ul>. Para uma lista numerada, use tags <ol> e <li>.

Quer adicionar uma linha para separar seções do seu conteúdo? A tag <hr> cria uma linha horizontal. É uma maneira simples de dividir visualmente seu texto.

Estes são apenas alguns exemplos, mas você pode ver como o HTML pode ser realmente útil no WordPress. Tudo se resume a adicionar um pouco de estrutura e funcionalidade extra ao conteúdo do seu site.

Como Aprender HTML para WordPress

Então, você está pensando: “Ok, HTML parece útil, mas como aprendo?” Boa pergunta! Felizmente, existem muitos recursos ótimos por aí.

Aqui estão alguns lugares onde você pode começar a aprender HTML agora mesmo.

MDN Web Docs é como a enciclopédia do desenvolvimento web. É feito pela Mozilla (o pessoal por trás do Firefox) e é super completo e confiável.

Se você gosta de aprendizado interativo, Codecademy é incrível. Eles têm cursos onde você realmente escreve código no seu navegador.

W3schools é um site popular para tutoriais de desenvolvimento web. Eles têm muitos exemplos e referências de HTML.

Quer ver como o HTML é usado especificamente no WordPress? Confira a documentação oficial do desenvolvedor do WordPress. É um pouco mais técnico, mas é um ótimo recurso à medida que você se sente mais confortável.

Não importa qual recurso você escolha, o mais importante é a prática. Sério. Você não aprenderá HTML apenas lendo sobre ele. Você tem que escrever código e ver o que acontece.

Experimente! Não tenha medo de quebrar as coisas. É assim que você aprende.

Como Usar HTML no WordPress

Existem várias maneiras de usar HTML no WordPress. Vamos passar por elas uma por uma.

1. Adicione um Bloco de HTML Personalizado no Editor de Blocos

Se você estiver usando o Editor de Blocos (Gutenberg) no WordPress, pode usar um bloco especial apenas para HTML. Ele é chamado de bloco HTML Personalizado.

Para usá-lo, basta adicionar um novo bloco à sua página ou postagem do WordPress. Procure por “HTML” na barra de pesquisa de blocos. Você verá o bloco HTML Personalizado aparecer.

Clique nele para adicioná-lo ao seu conteúdo. É como adicionar qualquer outro bloco. Você pode até arrastá-lo e soltá-lo onde quiser.

Assim que você adicionar o bloco, verá uma caixa onde pode digitar ou colar seu código HTML do WordPress. Basta colocar seu HTML ali mesmo.

Clique em Visualizar para ver como seu código HTML fica na página sem publicá-lo de fato.

Isso é muito útil para verificar seu código.

2. Edite um Bloco em HTML

Você sabia que pode editar qualquer bloco do WordPress como HTML? Sim, até mesmo os blocos de parágrafo normais.

Isso é útil se você quiser fazer pequenas alterações de HTML em um bloco que já está lá.

Primeiro, clique no bloco que deseja editar. Em seguida, procure os três pontos na barra de ferramentas do bloco. Clique neles.

Um menu aparecerá. Nesse menu, clique no botão Editar como HTML.

De repente, o bloco se transformará! Em vez do editor visual usual, você verá o código HTML personalizado para aquele bloco. Agora você pode editar o HTML diretamente.

Isso é ótimo para pequenos ajustes. Talvez você queira adicionar uma classe específica a um parágrafo para estilizar mais tarde. Ou talvez precise corrigir um pequeno problema de formatação que seja mais fácil de resolver em HTML.

Quando terminar de editar o HTML, você pode clicar em Editar visualmente na barra de ferramentas do bloco para voltar à visualização normal do editor visual.

3. Use o Editor de Código no Gutenberg

Para aqueles que se sentem confortáveis com código, o editor de blocos do WordPress tem uma visualização completa do Editor de Código. Isso mostra o código HTML de todo o seu post ou página.

Para mudar para o Editor de Código, olhe no canto superior direito da tela do seu editor Gutenberg. Você verá três pontos ali também – o menu de opções principal para todo o editor. Clique nesses pontos.

Nesse menu, você verá uma opção chamada Editor de código. Clique nela.

Você verá as tags e a estrutura de toda a sua página apresentadas em código.

Este editor HTML do WordPress é realmente para usuários avançados que preferem trabalhar diretamente em código. Se você gosta de codificar e quer ver a estrutura HTML geral da sua página, o Editor de Código é para você.

Mas cuidado! Se você cometer erros no HTML, poderá estragar o layout da sua página. É importante entender HTML se você for usar o Editor de Código extensivamente.

Se você quiser voltar ao editor visual normal, basta voltar ao menu superior direito e clicar em Editor visual.

4. Adicione HTML com o Editor Clássico

O Editor Clássico do WordPress tem duas abas: Visual e Texto. A aba Texto é onde você pode acessar o código.

Quando você clica em Texto, verá todo o código HTML do seu post. É aqui que você pode escrever ou colar código HTML diretamente.

Depois de adicionar ou editar seu HTML, você pode clicar de volta na aba Visual para ver como fica. Ela mostrará a versão renderizada do seu HTML.

5. Use um Plugin de Snippets de Código do WordPress

Às vezes, você quer adicionar pequenos trechos de HTML, CSS ou JavaScript ao seu site WordPress. Talvez você queira adicionar algum código de rastreamento personalizado ou um estilo especial para uma determinada parte do seu site.

Você poderia editar os arquivos do seu tema para fazer isso, mas pode ser arriscado. E se o seu tema for atualizado, suas alterações podem ser substituídas.

É aí que entram os plugins de snippets de código. Esses plugins permitem que você adicione snippets de código diretamente pelo painel do WordPress.

Eles mantêm seu código organizado e separado dos arquivos do seu tema. Isso é muito mais seguro e fácil de gerenciar, especialmente se você não é um especialista em código.

Antes de adicionar qualquer trecho de código, é sempre uma boa ideia fazer backup do seu site! Se algo der errado com seu código, você vai querer ser capaz de restaurar seu site facilmente.

Duplicator é um plugin que facilita muito a criação de backups completos do seu site WordPress. Eu sempre recomendo fazer backup antes de fazer alterações no código.

Meu plugin favorito de trechos de código é o WPCode (anteriormente "Insert Headers and Footers"). Essa ferramenta permite adicionar HTML, CSS e JavaScript ao seu site.

Além disso, existem toneladas de trechos pré-fabricados para você usar se não estiver acostumado a codificar.

Usar um plugin de trechos de código é muito mais seguro do que editar diretamente os arquivos do tema. Também é mais fácil acompanhar seu código personalizado.

6. Adicione HTML em Widgets do WordPress

O WordPress vem com um widget integrado chamado para HTML personalizado. Para encontrá-lo, vá ao seu painel do WordPress e clique em Aparência e depois em Widgets.

Você verá diferentes áreas de widgets, como Barra Lateral ou Rodapé. Estas dependem do seu tema do WordPress.

Adicione o widget de HTML personalizado na área de widgets onde você deseja adicionar seu HTML.

Digite ou cole seu HTML diretamente nessa caixa.

Você pode adicionar todo tipo de coisa com HTML em widgets. Texto personalizado, imagens, links, até mesmo códigos de incorporação – tudo funciona!

Depois de adicionar seu HTML, clique no botão Atualizar nas configurações do widget.

É isso! Seu HTML agora estará ativo nessa área de widgets do seu site.

7. Edite HTML em Temas do WordPress

Na verdade, você pode ir direto aos arquivos do seu tema do WordPress e editar o HTML lá. Isso lhe dá muito controle sobre a estrutura do seu site, mas também vem com grandes riscos.

Editar arquivos de tema diretamente pode quebrar seu site se você não for cuidadoso. Um pequeno erro no código pode causar grandes problemas.

Se você for editar os arquivos do tema, recomendo sempre usar um tema filho. Um tema filho é como uma cópia segura do seu tema principal onde você pode fazer alterações com segurança. Dessa forma, se o seu tema principal for atualizado, suas alterações não serão substituídas.

Ok, avisos à parte, veja como você pode editar os arquivos do tema. No seu painel do WordPress, vá em Aparência e depois em Editor de Arquivos de Tema (às vezes chamado apenas de Editor de Tema).

No lado direito, você verá uma lista dos arquivos do seu tema. Esses arquivos controlam a estrutura e o layout do seu site.

Alguns arquivos comuns que contêm HTML são:

• header.php: Este arquivo geralmente controla a parte superior do seu site – a área do cabeçalho.
• footer.php: Este arquivo controla a parte inferior – a área do rodapé.
• sidebar.php: Se o seu tema tiver uma barra lateral, este arquivo a controla.
• index.php: Esta é frequentemente a página principal do seu site, mostrando suas postagens de blog.
• single.php: Isso controla como as postagens individuais do blog são exibidas.
• page.php: Isso controla como as páginas regulares (como "Sobre nós" ou "Contato") são exibidas.
• Arquivos de modelo: seu tema pode ter outros arquivos de modelo para diferentes tipos de páginas.

Você pode editar o HTML diretamente no Editor de Arquivos do Tema. Basta clicar em um arquivo para abri-lo, encontrar o HTML que deseja alterar e fazer suas edições. Em seguida, clique em Atualizar Arquivo para salvar suas alterações.

Lembre-se: edite arquivos de tema apenas se você realmente souber o que está fazendo e sempre use um tema filho e tenha um backup.

Na minha experiência, eu só edito arquivos de tema para personalizações muito específicas que não podem ser feitas de outras maneiras. E mesmo assim, sou super cauteloso. Temas filhos e backups do Duplicator estão sempre em meu fluxo de trabalho quando estou mexendo em arquivos de tema.

8. Use FTP para Editar HTML do WordPress

FTP significa File Transfer Protocol (Protocolo de Transferência de Arquivos). Ele oferece o acesso mais direto para editar os arquivos do seu tema WordPress (e outros arquivos também).

Para usar FTP, você precisará de algumas coisas:

• Um Cliente FTP: Este é um software que permite conectar-se ao seu servidor. Clientes FTP populares são FileZilla, Cyberduck e Transmit.
• Credenciais FTP: Você obterá isso do seu provedor de hospedagem web. Geralmente incluem seu host FTP, nome de usuário, senha e número da porta.

Se você não conseguir encontrar suas credenciais FTP, verifique as configurações da sua conta de hospedagem ou entre em contato com o suporte.

Depois de ter isso, abra seu cliente FTP e insira suas credenciais FTP para conectar-se ao seu servidor.

Após conectar, você verá uma visualização com dois lados. Um lado mostra os arquivos no seu computador e o outro lado mostra os arquivos no seu servidor web.

Navegue até os arquivos do seu tema WordPress no lado do servidor. O caminho geralmente é algo como /wp-content/themes/nome-do-seu-tema/.

Depois de ter feito backup e estiver na sua pasta de tema via FTP, você pode baixar os arquivos HTML do tema para o seu computador ou editá-los diretamente.

Basta clicar com o botão direito no arquivo no seu cliente FTP e escolher Download ou Visualizar/Editar.

Agora, edite o arquivo baixado no seu computador usando um editor de código. Bons editores de código para isso são VS Code, Sublime Text, Atom ou Notepad++.

Abra o arquivo no seu editor de código e faça suas alterações de HTML.

Depois de terminar de adicionar o HTML, salve o arquivo. Clique com o botão direito no arquivo no seu cliente FTP e escolha Upload. Isso substituirá o arquivo original no seu servidor pela sua versão editada.

FTP é uma ferramenta poderosa, mas requer algum conhecimento técnico. E é importante ser responsável ao usá-la. Sempre verifique suas alterações antes de fazer o upload e sempre tenha um backup pronto.

Perguntas Frequentes (FAQs)

Considerações Finais

Aprender um pouco de HTML pode realmente abrir um novo mundo de possibilidades com o WordPress. Isso lhe dá mais controle, mais flexibilidade e uma compreensão mais profunda de como os sites realmente funcionam.

Não tenha medo de continuar aprendendo e experimentando. Quanto mais você brincar com o código, mais confortável se sentirá.

Explore os recursos que mencionei, experimente as diferentes maneiras de adicionar HTML no WordPress e veja o que você consegue criar!

E lembre-se, sempre faça backup do seu site antes de fazer grandes alterações! Ferramentas como Duplicator tornam os backups uma brisa, e elas podem te poupar muitas dores de cabeça no futuro.

Enquanto você está aqui, acho que vai gostar destes outros guias do WordPress:

• Esqueça o Que Você Sabe Sobre Editores de Código WordPress – Experimente Isto em Vez Disso
• 15 Melhores Ferramentas No-Code para WordPress
• Codifique com Mais Inteligência, Não Mais Dificuldade: Ferramentas para Desenvolvedores WordPress Para Cada Profissional
• Como Usar o WordPress CLI: Domine a Linha de Comando
• Quanto Tempo Leva para Aprender WordPress?